<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>Document</title>
        <style>
            header{
                position: fixed;
                z-index: 1;
                height: 50px;
                top: 0;
                left: 0;
                right: 0;
                background-color: #f0c;
            }
            footer{
                position: fixed;
                z-index: 1;
                height: 34px;
                bottom: 0;
                left: 0;
                right: 0;
                background-color: #fc0;
            }
            main{
                position: absolute;
                top: 50px;
                bottom: 34px;
                overflow-y: scroll;
                -webkit-overflow-scrolling: touch;
            }
            main .content{
                height: 2000px;
                background-color: #0cf;
            }
        </style>
    </head>
    <body>
        <header>头部</header>
        <main>
            <div class="content">内容区域</div>
        </main>
        <footer id="footer"><input type="text" placeholder="请输入弹幕" /><button>发送</button></footer>
        <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <script>
            // var oHeight = $(document).height(); //浏览器当前的高度
               
            //    $(window).resize(function(){
             
            //         if($(document).height() < oHeight){
                     
            //             $("#footer").css("position","static");
            //         }else{
                         
            //             $("#footer").css("position","absolute");
            //         }
                    
            //    });
            // 防止内容区域滚到底后引起页面整体的滚动
            var content = document.querySelector('main');
            var startY;

            content.addEventListener('touchstart', function (e) {
                startY = e.touches[0].clientY;
            });

            content.addEventListener('touchmove', function (e) {
                // 高位表示向上滚动
                // 底位表示向下滚动
                // 1容许 0禁止
                var status = '11';
                var ele = this;

                var currentY = e.touches[0].clientY;

                if (ele.scrollTop === 0) {
                    // 如果内容小于容器则同时禁止上下滚动
                    status = ele.offsetHeight >= ele.scrollHeight ? '00' : '01';
                } else if (ele.scrollTop + ele.offsetHeight >= ele.scrollHeight) {
                    // 已经滚到底部了只能向上滚动
                    status = '10';
                }

                if (status != '11') {
                    // 判断当前的滚动方向
                    var direction = currentY - startY > 0 ? '10' : '01';
                    // 操作方向和当前允许状态求与运算，运算结果为0，就说明不允许该方向滚动，则禁止默认事件，阻止滚动
                    if (!(parseInt(status, 2) & parseInt(direction, 2))) {
                        stopEvent(e);
                    }
                }
            });
        </script>
    </body>
</html>